<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>返校申请</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>

    <style type="text/css">

        table {
            margin-left: 3cm;
            margin-top: 1cm;

            width: 600px;


        }

        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 100%;
            color: #333333;
            border-width: medium;
            border-color: #666666;
            border-collapse: collapse;
            /*border-style: solid;*/


        }

        table.gridtable td {
            border-width: medium;
            padding: 8px;
            border-color: #666666;
            background-color: #ffffff;


        }

        .baseMessage {

        }

        .baseMessage p {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 200%;
            margin-left: 2cm;
            margin-top: 1cm;

        }

        .baseMessage2 {
            font-weight: 600;
            width: 250px;
            height: 50px;
            font-size: 100%;
            float: left;
            margin-left: 1cm;


        }

        .baseMessage2 td {
            font-weight: 500;
        }

        .baseMessage3 {

        }

        .baseMessage3 td {
            font-size: 200%;
            color: #b92c28;
            text-align: center;

        }

        /* 进度条 */
        /* 创建步骤数字计数器 */
        .steps {
            position: relative;
            margin-bottom: 30px;
            counter-reset: step;
            background: #fff;
            margin: 5px 0;
            overflow: hidden;
            margin-left: -39px;
        }

        /* 步骤描述 */
        .steps li {
            list-style-type: none;
            font-size: 14px;
            text-align: center;
            width: 25%;
            position: relative;
            float: left;
            height: 100px;
            line-height: 39px;
            padding: 10px 0;
        }

        /* 步骤数字 */
        .steps li:before {
            display: block;
            content: counter(step); /* 设定计数器内容 */
            counter-increment: step; /* 计数器值递增 */
            width: 50px;
            height: 50px;
            background-color: #ccc;
            line-height: 10px;
            border-radius: 50px;
            font-size: 0;
            color: #fff;
            text-align: center;
            font-weight: 600;
            margin: 0 auto 9px auto;
        }

        /* 连接线 */
        .steps li ~ li:after {
            content: '';
            width: 86%;
            height: 3px;
            background-color: #ccc;
            position: absolute;
            left: -43%;
            top: 31px;
            z-index: 0;
        }

        /* 将当前/完成步骤之前的数字及连接线变绿 */
        .steps li.active:before {
            background-color: #39C5BB;
        }

        .steps li.active2:before {
            background-color: #ccc;
        }

        .p1 {
            margin-left: 2cm;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/studentLeft::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding:20px 0px 45px 0px;">
            <div class="baseMessage">
                <p>提前返校申请详情</p>

            </div>
            <table class="gridtable">
                <tr class="baseMessage3" th:each="getComeList:${getComeList}">
                    <td th:if="${getComeList.getStaycomeApplystate()}==1">正在审核中！</td>
                    <td th:if="${getComeList.getStaycomeApplystate()}==2">您的审核已通过！</td>
                    <td th:if="${getComeList.getStaycomeApplystate()}==3">您的审核已撤回！</td>
                    <td th:if="${getComeList.getStaycomeApplystate()}==4">抱歉！您的审核未通过！</td>


                </tr>

                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>姓名:</td>
                    <td th:text="${getStucomeList.getStuName()}"></td>
                </tr>
                <tr class="baseMessage2" th:each="getComeList:${getComeList}">
                    <td>学号:</td>
                    <td th:text="${getComeList.getStuId()}"></td>
                </tr>
                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>院系:</td>
                    <td th:text="${getStucomeList.getStuCollege()}"></td>
                </tr>
                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>专业:</td>
                    <td th:text="${getStucomeList.getStuMajor()}"></td>
                </tr>
                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>班级:</td>
                    <td th:text="${getStucomeList.getStuClass()}"></td>
                </tr>
                </tr>
                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>年级:</td>
                    <td th:text="${getStucomeList.getStuGrade()}"></td>
                </tr>
                <tr class="baseMessage2" th:each="getStucomeList:${getStucomeList}">
                    <td>联系电话:</td>
                    <td th:text="${getStucomeList.getStuPhone()}"></td>

                </tr>
                <tr class="baseMessage2" th:each="getComeList:${getComeList}">
                    <td>返校时间:</td>
                    <td th:text="${getComeList.getStaycomeTime()}"></td>
                </tr>

                <tr class="baseMessage2" th:each="getComeList:${getComeList}"
                    th:if="${getComeList.getStaycomeType()}==2">
                    <td>申请原因:</td>
                    <td th:text="${getComeList.getStaycomeReason()}"></td>
                </tr>


            </table>

            <ul class="steps" th:each="getComeList:${getComeList}"><p class="p1">审批流程:</p>
                <li class="active2">学生提交申请</li>
                <li th:if="${getComeList.getStaycomeApplystate()}==1" class="active">学工处审核</li>
                <li th:if="${getComeList.getStaycomeApplystate()}!=1" class="active2">学工处审核</li>
                <!-- 使用多个th：if会出错所以使用or作为逻辑代替-->
                <li th:if="${getComeList.getStaycomeApplystate()}==2  or ${getComeList.getStaycomeApplystate()}==4"
                    class="active">审核结果
                </li>
                <!-- 使用多个th：if会出错所以使用and作为逻辑与代替-->
                <li th:if="${getComeList.getStaycomeApplystate()}!=2 and ${getComeList.getStaycomeApplystate()}!=4"
                    class="active2">审核结果
                </li>
<!--2代表审核通过，4代表审核未通过                -->
            </ul>

        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>


</body>
</html>
